<template>
  <view class="register">
    <view class="back" @click="loginClick">
      <image class="img" src="../../../static/clos.png" mode="" />
    </view>
    <text class="bt1">您好，欢迎来到祈福保</text>
    <text class="bt2">请填写以下注册信息</text>
    <view class="wrap">
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon1.png"
          mode=""
        />
        <input
          type="number"
          maxlength="11"
          v-model="mobile"
          placeholder="请输入您的手机号码"
        />
      </view>
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon2.png"
          mode=""
        />
        <input type="number" v-model="captcha" placeholder="请输入验证码" />
        <view class="authBtn">
          <text v-if="verifyshow" @click="authClcik">获取验证码</text>
          <text v-else>{{ second }}s</text>
        </view>
      </view>
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon3.png"
          mode=""
        />
        <input type="password" v-model="password" placeholder="请输入密码" />
      </view>
      <view class="row">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon3.png"
          mode=""
        />
        <input type="password" v-model="pwd" placeholder="请确认密码" />
      </view>
      <view class="row" v-if="invite_code">
        <image
          class="img"
          src="../../../static/PersonalCenter/icon4.png"
          mode=""
        />
        <input v-model="invite_code" disabled placeholder="邀请码" />
      </view>
    </view>
    <view class="btn" @click="regiSter">注册</view>
    <view class="jump" @click="Login">已有账号请登录？</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobile: "",
      password: "",
      pwd: "",
      captcha: "", //验证码
      verifyshow: true,
      second: "", //倒计时
      timer: null,
      invite_code: "",
      Wechatenvironment: "",
    };
  },
  onLoad(options) {
    this.invite_code = options.invite_code;
  },
  onShow() {
    this.isWechat();
  },
  methods: {
    // 判断是否在浏览器
    isWechat() {
      let en = window.navigator.userAgent.toLowerCase();
      if (en.match(/MicroMessenger/i) == "micromessenger") {
        // 微信内部打开
        this.Wechatenvironment = true;
        uni.switchTab({
          url: "../../index/index",
        });
      } else {
        this.Wechatenvironment = false;
      }
    },
    //退出注册
    loginClick() {
      uni.navigateTo({
        url: "../Login/Login",
      });
    },
    //手机号注册
    async regiSter() {
      let mobile = this.mobile;
      let password = this.password;
      let captcha = this.captcha;
      let inviteCode = this.invite_code;
      let that = this;
      if (this.mobile == "") {
        uni.showToast({
          title: "手机号码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.password == "") {
        uni.showToast({
          title: "密码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.password != this.pwd) {
        uni.showToast({
          title: "密码不一致",
          icon: "none",
        });
        this.password = this.pwd = "";
        return false;
      }
      if (this.captcha == "") {
        uni.showToast({
          title: "验证码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.mobile && this.password) {
        const res = await that.$myRequest({
          url: "user/register",
          method: "POST",
          data: {
            mobile: mobile,
            password: password,
            captcha: captcha,
            inviteCode: inviteCode,
          },
        });
        if (res.code == 1) {
          uni.setStorageSync("token", res.data.token);
          uni.setStorageSync("mobile", res.data.mobile);
          uni.switchTab({
            url: "../../index/index",
          });
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.msg,
          });
        }
      }
    },

    //获取验证码
    async authClcik() {
      let mobile = this.mobile;
      let that = this;
      if (!RegExp(/^1[34578]\d{9}$/).test(that.mobile)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: "none",
        });
      } else {
        uni.showLoading({
          title: "正在发送",
        });
        that.second = 60;

        const { data } = await that.$myRequest({
          url: "sms/get_captcha",
          method: "POST",
          data: {
            mobile: mobile,
            event: "register",
          },
        });

        if (data.code == 1) {
          uni.hideLoading();
          that.timedown(that.second);
        } else {
          uni.hideLoading();
          uni.showToast({
            icon: "none",
            title: data.msg,
          });
        }
      }
    },
    // 验证码倒计时
    timedown(num) {
      let that = this;
      if (num == 0) {
        that.verifyshow = true;
      } else {
        that.verifyshow = false;
        setTimeout(() => {
          that.second--;
          that.timedown(that.second);
        }, 1000);
      }
    },
    //密码登录
    Login() {
      uni.navigateTo({
        url: "../Login/Login",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fff;
}
.register {
  .back {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30rpx;
    .img {
      display: block;
      width: 30rpx;
      height: 30rpx;
    }
  }
  .bt1 {
    display: block;
    box-sizing: border-box;
    padding: 0 62rpx;
    margin-top: 40rpx;
    font-size: 46rpx;
    font-weight: 500;
    color: #333333;
  }
  .bt2 {
    display: block;
    box-sizing: border-box;
    padding: 0 62rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    margin-top: 20rpx;
  }
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 60rpx;
    margin-top: 110rpx;
    .row {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1rpx solid #eee;
      padding-bottom: 25rpx;
      position: relative;
      margin-bottom: 62rpx;
      .img {
        display: block;
        width: 24rpx;
        height: 26rpx;
        margin-right: 18rpx;
      }
      input {
        flex: 1;
        display: block;
        border: none;
        background: none;
        outline: none;
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
      }
      .authBtn {
        position: absolute;
        right: 0;
        font-size: 26rpx;
        font-weight: 400;
        color: #c52b2e;
      }
    }
  }
  .btn {
    width: 530rpx;
    height: 76rpx;
    background: #c52b2e;
    border-radius: 38rpx;
    text-align: center;
    line-height: 76rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 130rpx auto 0;
  }
  .jump {
    text-align: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    margin-top: 30rpx;
  }
}
</style>
